<template>
  <div id="atten" style="width:100%;height:330px;"></div>
</template>

<script>
// import {getnum} from 'config/api';
export default {
  data () {
    return {
      //  人员出勤率统计
      atten_obj: {
        tooltip: {
          formatter: ''
        },
        //  保洁
        series: [{
          name: '生产出勤率',
          type: 'gauge',
          detail: {
            formatter: '{value}%',
            fontSize: 16,
            offsetCenter: [0, '50px']
          },
          data: [{
            value: 10,
            name: '生产出勤率'
          }],
          center: ['25%', '52%'],
          radius: '80%',
          title: {
            offsetCenter: [0, '80px']
          },
          axisLine: {
            lineStyle: {
              width: 20,
              color: [[0.2, '#c23531'], [0.8, '#63869e'], [1, '#91c7ae']]
            }
          },
          splitLine: {
            length: 20
          }
        },
        {
          //  巡查
          name: '行政出勤率',
          type: 'gauge',
          detail: {
            formatter: '{value}%',
            fontSize: 16,
            offsetCenter: [0, '50px']
          },
          data: [{
            value: 98,
            name: '行政出勤率'
          }],
          center: ['74%', '52%'],
          radius: '80%',
          title: {
            offsetCenter: [0, '80px']
          },
          axisLine: {
            lineStyle: {
              width: 20,
              color: [[0.2, '#c23531'], [0.8, '#63869e'], [1, '#91c7ae']]
            }
          },
          splitLine: {
            length: 20
          }
        }]
      }
    };
  },
  created () {
    this.$nextTick(() => {
      // this.attendance();  //  保洁、巡查出勤率
    });
  },
  mounted () {
    let userFlow = echarts.init(document.getElementById('atten'), 'dark');
    // this.car_work_obj.series[0].data.push((Math.random() * 1000).toFixed(0) - 0);
    // this.car_work_obj.series[1].data.push((Math.random() * 1000).toFixed(0) - 0);
    // this.car_work_obj.series[2].data.push((Math.random() * 1000).toFixed(0) - 0);
    userFlow.setOption(this.atten_obj);
    window.addEventListener('resize', function () {
      userFlow.resize();
    });
  }
  // methods: {
  //   //  保洁、巡查出勤率
  //   attendance () {
  //     getnum().then((res) => {
  //       let datas = res.data.data;
  //       //  如果接收到的数据为空，默认赋值为0
  //       if (datas.length !== 0) {
  //         let clear = null;
  //         let patrol = null;
  //         clear = parseInt((datas[0].attendanceCnt / datas[0].totalCnt).toFixed(2) * 100);
  //         patrol = parseInt((datas[0].attendanceCnt / datas[0].totalCnt).toFixed(2) * 140);
  //         this.atten_obj.series[0].data[0].value = clear;  //  保洁
  //         this.atten_obj.series[1].data[0].value = patrol;  //  巡查
  //       } else {
  //         this.atten_obj.series[0].data[0].value = 0;  //  保洁
  //         this.atten_obj.series[1].data[0].value = 0;  //  巡查
  //       }
  //     });
  //     let myChart = echarts.init(document.getElementById("atten")); //  获取Canvas
  //     myChart.setOption(this.atten_obj); //  插入修改数据
  //     //  Canvas自适应
  //     window.addEventListener('resize', function () {
  //       myChart.resize();
  //     });
  //   }
  // }
};
</script>
